Skip to content

refactor(bubble-list): simplify grouping logic#305

Merged
hexqi merged 2 commits intoopentiny:developfrom
gene9831:feat/bubble-grouping-and-array-display
Feb 12, 2026
Merged

refactor(bubble-list): simplify grouping logic#305
hexqi merged 2 commits intoopentiny:developfrom
gene9831:feat/bubble-grouping-and-array-display

Conversation

@gene9831
Copy link
Collaborator

@gene9831 gene9831 commented Feb 11, 2026 •
edited
Loading

概要

  • 简化 BubbleList 分组规则，移除对数组 content 的特殊处理，让行为完全由 role / dividerRole / hidden 决定。
  • 明确数组内容在 contentRenderMode="split" 下按项拆分的前提条件。
  • 更新 Bubble 文档和 demo，使分组与数组内容展示更直观一致。

主要改动

  • 分组逻辑

    • 删除「user + 数组 content → 单独密封分组」的特殊分支。
    • consecutive：仅按角色和 hidden 连续合并。
    • divider：每条分割角色消息单独成组；两个分割角色之间的消息合并为一组。
    • 文档与类型注释同步更新上述行为。

  • 数组内容展示

    • 文档说明：只有在「当前分组内仅一条消息」且 contentRenderMode === 'split'、content 为数组时，数组每一项才单独渲染为一个 box；否则不拆分。
    • 重写 list-array-content.vue，演示 split + 单消息组 下数组内容拆分为多个 box 的效果。

  • 自定义分组 demo

    • 重写 list-custom-group.vue，通过按钮在两种自定义分组策略间切换：
      • 按时间间隔分组（时间差 > 5 秒新建分组）。
      • 按对话轮次分组（以 user 消息为一轮起点，后续 ai/system 回复归入同一组）。

Summary by CodeRabbit

  • New Features

    • Added content-render-mode prop with "split" option to customize array content rendering
    • Enhanced custom grouping with time-based and turn-based grouping strategies

  • Documentation

    • Updated grouping policy and array content rendering guidance
    • Clarified divider-based grouping behavior and interaction with content rendering modes

@gene9831
refactor(bubble-list): simplify grouping logic
ef8c029 
- Remove special-case grouping for array content and rely on role/divider/hidden rules only
- Make divider strategy always create single-message groups for divider role and merge messages between dividers
- Clarify docs and demos to reflect the simplified grouping behavior and array content display
@gene9831
feat(bubble-list): enhance grouping options with time and turn modes
4a76135 
- Introduced a custom grouping strategy allowing users to switch between grouping messages by time intervals or conversation turns.
- Updated demo to reflect new grouping options and improved message examples for clarity.
- Added buttons for users to select their preferred grouping mode.
@coderabbitai
Copy link

coderabbitai bot commented Feb 11, 2026 •
edited
Loading

Walkthrough

The pull request enhances the BubbleList component with a new content-render-mode prop for controlling array content rendering and introduces dual-mode custom grouping (time-based and turn-based). The implementation simplifies grouping logic by removing special array-content handling while updating documentation and demos to reflect the new rendering behavior.

Changes

Cohort / File(s) Summary
Demo files - Rendering behavior
docs/demos/bubble/list-array-content.vue, docs/demos/bubble/list-consecutive.vue		 Updated demos to showcase new content-render-mode prop and clarified grouping behavior; updated example data and descriptions to reflect split rendering and consecutive message merging rules.
Demo files - Dual-mode grouping
docs/demos/bubble/list-custom-group.vue		 Introduced time-based and turn-based grouping strategies with UI toggle buttons; added groupByTime and groupByTurn helper functions; expanded demo data to illustrate both grouping modes; added reactive state management for mode switching.
Component implementation
packages/components/src/bubble/BubbleList.vue		 Removed useContentResolver import; simplified grouping logic by eliminating isLastGroupSealed control and special array-content handling; reworked merge conditions to be stricter for divider messages; reduced net code lines through logic consolidation.
Type definitions & documentation
packages/components/src/bubble/index.type.ts, docs/src/components/bubble.md		 Updated grouping strategy documentation to clarify divider behavior (each divider message in its own group, others merged between dividers); rewrote array content display guidance for content-render-mode="split" behavior; updated special case rules to remove array-content sealing logic.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Bubbles split and grouped with care,
Time and turns both handled fair,
Array content finds its way,
Through split modes on display,
Simpler logic, cleaner air!

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'refactor(bubble-list): simplify grouping logic' accurately summarizes the main objective of the PR: simplifying BubbleList grouping logic by removing special-case handling for array content and clarifying grouping rules.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments
docs/demos/bubble/list-custom-group.vue (1)

150-155: Consider accepting the dividerRole parameter for API compliance.

customGroupStrategy ignores the second dividerRole argument defined by the BubbleGroupFunction type. This is fine for a demo, but adding the parameter (even if unused) would keep the signature aligned with the type contract and avoid confusion for developers copying this demo as a starting point.

-const customGroupStrategy = (msgs: BubbleMessage[]): BubbleMessageGroup[] => {
+const customGroupStrategy = (msgs: BubbleMessage[], _dividerRole?: string): BubbleMessageGroup[] => {

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Contributor

github-actions bot commented Feb 11, 2026 •
edited
Loading

✅ Preview build completed successfully!

Click the image above to preview.
Preview will be automatically removed when this PR is closed.

@github-actions
Copy link
Contributor

github-actions bot commented Feb 11, 2026

📦 Package Preview

pnpm add https://pkg.pr.new/opentiny/tiny-robot/@opentiny/tiny-robot@4a76135

pnpm add https://pkg.pr.new/opentiny/tiny-robot/@opentiny/tiny-robot-kit@4a76135

pnpm add https://pkg.pr.new/opentiny/tiny-robot/@opentiny/tiny-robot-svgs@4a76135

commit: 4a76135

@hexqi hexqi merged commit 9b440c8 into opentiny:develop Feb 12, 2026
4 checks passed
@github-actions
Copy link
Contributor

github-actions bot commented Feb 12, 2026

🧹 Preview Cleaned Up

The preview deployment has been removed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@hexqi hexqi hexqi approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@gene9831 @hexqi

Comments